<template>
	<div>
		<div>
			<baidu-map class="bm-view" :center="center" :zoom="zoom"
			           :scroll-wheel-zoom="true"
			           @ready="handler">
				<bm-boundary name="石河子" fillColor :strokeWeight="2" strokeColor="yellow"></bm-boundary>
				<div v-for="(item,index) in paths" :key="index">
					<bm-polygon v-for="(polygonItem,polygonIndex) in item.polygonList" :key="polygonIndex"
            :path="polygonItem"
					            @mousedown="mousedown" @mouseup="mouseup"
					            :stroke-color="item.color||strokeColor" :fill-color="item.color"
					            :stroke-weight="strokeWeight" :fill-opacity="fillOpacity"/>
					<bm-label :content="item.name" :position="item.position" :labelStyle="labelStyle"/>
				</div>
				<bm-marker v-for="(item,index) in pointList" :key="index" :position="item" :title="item.name">
				</bm-marker>
			</baidu-map>
		</div>
	</div>
</template>

<script>
import {mapStyle} from "@/const/gis";
import {polygonJsonjiedao} from "./jiedao";
import {polygonJsonbianjie} from "./bianjie";
import {polygonJsonshiqu} from "./shiqu";
import {polygonJsonother} from "./other";
import {companyData} from "./company-point";

export default {
	components: {},
	name: "map",
	props: {},
	data() {
		return {
			id: this.$route.query.id || "bianjie",
			paths: [],
			pointList: [],
			labelStyle: {color: '#fff', fontSize: '18px', border: 0, backgroundColor: 'transparent'},
			strokeWeight: 2, strokeColor: "#95ffff", fillOpacity: 0.5, fillOpacity2: 1,
			fillColor: "red",
			// center:{lng:119.140177,lat:35.56202},
			center: "石河子",
			zoom: 11,
			colorList: ['#F53434', '#FA6727', '#F69C16', '#FCE834', '#CAF51B', '#8BF322', '#45F818', '#36F649', '#2EFC81', '#07FBB2', '#2CF7F7', '#1AB4F7', '#2379F9', '#2539F3', '#390AF6', '#7F06F9', '#CC10FB', '#FE1BE8', '#F425A1', '#F90C53']

		};
	},
	computed: {},
	created() {
		this.pointList = companyData;
		this.pathsInit();
	},
	mounted() {
	},
	methods: {
		getPolygonJson() {
			if ("jiedao" == this.id) {
				return polygonJsonjiedao;
			}
			if ("shiqu" == this.id) {
				return polygonJsonshiqu;
			}
			if ("other" == this.id) {
				return polygonJsonother;
			}
			return polygonJsonbianjie;
		},
		getColor(j) {//十六进制颜色随机
			// let r = Math.floor(Math.random()*256);
			// let g = Math.floor(Math.random()*256);
			// let b = Math.floor(Math.random()*256);
			// let color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
			// return color;
			return this.colorList[j];
		},
		pathsInit(){
      let polygonJson =this.getPolygonJson();
      let paths=[];
      for(let i=0;i<polygonJson.length;i++){
        let feature=polygonJson[i];
          // let name =feature.name;
        let center =feature.centroid;
        let position={lng:center[0],lat:center[1]};
        let coordinates=feature.coordinates;
        let polygonList=[];
        for(let j=0;j<coordinates.length;j++){
          let coord=coordinates[j];
          let path=[];
          for(let k=0;k<coord.length;k++){
            let p =coord[k];
            path.push({lng: p[0], lat: p[1]});
          }
          polygonList.push(path);
        }
        feature.position=position;
        feature.polygonList=polygonList;
        feature.color=this.getColor(i);
        paths.push(feature);
      }
      this.paths=paths;
    },
		mousedown({target}) {
			target.setFillOpacity(this.fillOpacity2)
		},
		mouseup({target}) {
			target.setFillOpacity(this.fillOpacity)
		},
		handler({BMap, map}) {
			map.setMapStyle(mapStyle);
			// this.map = map;
		}
	}
};

</script>
<style scoped lang="scss">
.bm-view {
	height: 600px;
}
</style>
